<template>
  <div class="alg-task-detail bg-gray flex-column h-100P">
    <CustomTabs class="content bg-white flex-sub mg-top-10 flex-column">
      <el-tabs v-model="activeName" type="border-card" class="flex-sub flex-column" :before-leave="handleLeave">
        <el-tab-pane label="设备列表" name="devices" lazy class="h-100P">
          <Devices :ability="ability"></Devices>
        </el-tab-pane>
        <el-tab-pane label="任务事件" name="events" lazy class="h-100P">
          <Events :ability="ability"></Events>
        </el-tab-pane>
        <el-tab-pane label="告警方式" name="brief" lazy class="h-100P">
          <AlertFunction :ability="ability"></AlertFunction>
        </el-tab-pane>
      </el-tabs>
    </CustomTabs>
  </div>
</template>

<script>
import CustomTabs from '@/components/custom-tabs'
import Devices from './components/devices'
import Events from './components/events'
import AlertFunction from './components/alert-function'

import { apiUpdateAlgTask } from './api'

export default {
  name: 'AlgTaskDetail',
  components: { CustomTabs, Devices, Events, AlertFunction },
  props: {
    ability: {
      type: Object,
      required: false,
      default: null
    }

  },
  data() {
    return {
      activeName: 'devices'
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
    },
    handleNavBack() {
      this.$router.back()
    },
    async handleLeave() {
      return true
      // if (this.$refs.brief.isEditFlag && this.activeName === 'brief') {
      //   await this.$confirm(
      //     '您尚未保存当前页面已修改的信息，切换至其他页签将导致该信息丢失， 确认要切换吗？',
      //     '当前内容未保存',
      //     {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     }
      //   ).then(() => {
      //     this.$refs.brief.handleReset()
      //   })
      // }
    },
    handleChangeAlgTaskStatus(ability) {
      apiUpdateAlgTask({
        algAbilityId: ability.id,
        dataStatusEnum: ability.dataStatusEnum
      }).then(() => {
        this.$message.success('任务状态修改成功')
      }).finally(() => {
        this.initPage()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.alg-task-detail {
  .brief-msg {
    padding: vw(20px);

    .code, .update-time {
      margin-top: vw(20px);
    }
  }

  ::v-deep {
    .el-tabs__content {
      flex: 1;
    }
  }
}

</style>
